<template>
  <div>
    <!-- 添加或修改公告对话框 -->
    <el-dialog title="外借归还" :visible.sync="$parent.open" width="780px" append-to-body>
      <div class="center_dialog">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-divider>相关领用单信息</el-divider>
          <el-form-item label="外借单号" prop="borrowArray">
            <el-select v-model="form.borrowArray" multiple @change="SelectChange(form.borrowArray)"
              placeholder="请选择外借单号" style="width:100%">
              <el-option v-for="dict in NoReturnList" :key="dict.index" :label="`${dict.borrowNum}`"
                :value="dict.borrowId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-divider>设备信息</el-divider>
          <el-form-item label="归还设备" prop="borrowEquipments">
            <el-select v-model="form.borrowEquipments" multiple placeholder="请选择归还设备" style="width:100%">
              <el-option v-for="dict in basedata" :key="dict.index"
                :label="`${dict.equipmentName}(${dict.equipmentNum})`" :value="dict.equipmentAccountId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-divider>归还信息</el-divider>
          <el-form-item label="归还经手人" prop="returnHandlerId">
            <el-select v-model="form.returnHandlerId" placeholder="请选择归还经手人" style="width:100%">
              <el-option v-for="dict in userData" :key="dict.index" :label="dict.userName" :value="dict.userId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="归还时间" prop="returnTime">
            <el-date-picker value-format="yyyy-MM-dd hh:mm:ss" style="width:100%" v-model="form.returnTime" type="date"
              placeholder="请选择归还时间">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div align="center" slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="() => $parent.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getuserlist } from '@/api/equipment/equipment.js'
import { putBorrowEquipment, getBorrowEquipmentlist, getBorrowNoReturnlist } from '@/api/management/management.js'
import Upload from '@/components/upload/index.vue'
export default {
  props: [],
  components: {
    Upload
  },
  data () {
    return {
      form: {
        "borrowEquipments": [
          // { "equipmentAccountId": 2 /*设备ID*/, "borrowId": 2 /*外借ID*/ },
          // { "equipmentAccountId": 4, "borrowId": 1 }
        ], //ID集合
        "borrowArray": [],
        "returnHandlerId": undefined, //归还经手人ID
        "returnTime": undefined //归还时间
      },
      userData: [],//用户列表
      basedata: [],//设备列表
      NoReturnList: [],
      rules: {
        borrowEquipments: { required: true, message: '必填', trigger: 'blur' },
        borrowArray: { required: true, message: '必填', trigger: 'blur' },

        borrowId: { required: true, message: '必填', trigger: 'blur' },
        returnHandlerId: { required: true, message: '必填', trigger: 'blur' },
        returnTime: { required: true, message: '必填', trigger: 'blur' },
      }
    }
  },
  computed: {
    deptID () {
      return this.$store.state.user.deptId
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    async getlist () {
      let userdata = await getuserlist({ deptId: this.deptID });
      let res = await getBorrowNoReturnlist();
      this.userData = userdata.data
      this.NoReturnList = res.data

    },
    async SelectChange (value) {
      if (value.length === 0) {
        return false
      }
      let params = {
        borrowIds: value.join(',')
      }
      let basedata = await getBorrowEquipmentlist(params);
      this.basedata = basedata.data
    },
    //提交
    submitForm () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let Arr = []//接收数据
          let Equipments = this.form.borrowEquipments.map(val => {//选中的设备转换为json格式数据
            let deptIds;
            for (let index = 0; index < this.basedata.length; index++) {
              const element = this.basedata[index];
              if (element.equipmentAccountId === val) {
                deptIds = element.deptId
              }
            }
            return {
              equipmentAccountId: val,
              deptIds: deptIds
            }
          })
          this.form.borrowArray.forEach(item => {
            Equipments.forEach(value => {//转换的数据判断是否为绑定的数据
              if (item === value.deptIds) {
                Arr.push({
                  equipmentAccountId: value.equipmentAccountId,
                  borrowId: item
                })
              }
            })
          })

          //接口参数
          let params = {
            ...this.form,
            borrowEquipments: Arr
          }
          console.log(params);
          putBorrowEquipment(params).then(res => {
            if (res.code === 200) {
              this.$message.success(res.msg)
              this.$emit('handleUpdate')
            }
          })
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  // text-align: center;
  width: 60%;
  // padding: 0 10% 0 10%;
  box-sizing: border-box;
  margin: 0px auto;
}

.el-tag--medium {
  margin: 0px 3px;
}
</style>